<template>
  <div class="blue-work-detail-container">
    <hurdle :showLine="0"></hurdle>

    <div class="blue-work-detail-box1">
      <div class="blue-work-detail-con1">
        <img :src="workInfo.mechanismUrl?workInfo.mechanismUrl:require('../../../images/pic _bg.png')"
             class="company-pic1"/>
        <div class="company-work-box">
          <div class="company-work-con1"><span class="company-name">{{mechanismName}}</span><span
            class="lend-text" v-if="workInfo.lendType == 1">可借支</span>
          </div>
          <div class="company-work-con2"><span class="post-text">{{workName}}</span></div>
          <div class="company-work-con3"><span v-if="workInfo.age">年龄要求：{{workInfo.age}}</span>
            <span>招{{maxNumber}}人</span><span v-if="workStatus != 1">/已报名{{applyNum}}人</span></div>
          <div class="company-work-con4"><span>{{workMoney}}</span></div>
        </div>
        <div class="company-work-fee"
             v-if="workInfo.postType == 0 && workInfo.reStatus == 1 && workInfo.reMoney > 0 && workInfo.reTime > 0">
          <img src="../../../images/home_fee.png" class="company-pic2"/>
          <span class="fee-num">{{workInfo.reMoney}}元</span>
        </div>
        <div class="company-work-fee"
             v-if="workInfo.postType == 1 && workInfo.reStatus == 1 && workInfo.addWorkMoney > 0 && workInfo.reTime > 0">
          <img src="../../../images/home_fee.png" class="company-pic2"/>
          <span class="fee-num">{{Math.floor(workInfo.addWorkMoney * 10) / 10}}元/时</span>
        </div>

        <div class="company-collect-box" v-if="collect == 1" @click="collectWork">
          <img src="./collection.png" class="company-pic3"/>
          <span class="collect-text">收藏</span>
        </div>
        <button class="cancel-collect-text" type="button" v-else-if="collect == 0" @click="collectWork">取消收藏</button>

        <button class="apply-work-btn" type="button" v-if="applyBtn == 2" @click="openApplyModal">立即报名</button>
        <button class="cancel-work-btn" type="button" v-else-if="applyBtn == 1" @click="cancelApply">取消报名</button>
        <button class="await-work-btn" type="button" v-else-if="workStatus == 1">待招聘</button>
      </div>
    </div>

    <div class="blue-work-detail-box2">

      <div class="blue-work-detail-brief-box">
        <div class="return-fee-box"
             v-if="(workInfo.postType == 0 && workInfo.reStatus == 1 && workInfo.reMoney > 0 && workInfo.reTime > 0) || (workInfo.postType == 1 && workInfo.reStatus == 1 && workInfo.addWorkMoney > 0 && workInfo.reTime > 0)">
          <div class="return-fee-text">
            <span>奖励</span><span>说明</span>
          </div>
          <div class="return-fee-line"></div>
          <div class="return-fee-con" v-html="returnFeeDesc">
          </div>
        </div>

        <div class="blue-work-detail-brief-con" :class="{'no-free':!((workInfo.postType == 0 && workInfo.reStatus == 1 && workInfo.reMoney > 0 && workInfo.reTime > 0) || (workInfo.postType == 1 && workInfo.reStatus == 1 && workInfo.addWorkMoney > 0 && workInfo.reTime > 0))}">
          <div class="brief-text-box">
            <span class="brief-line"></span><span>招聘详情</span>
          </div>

          <div class="blue-work-detail-table-box">
            <table class="demand-table-box">
              <thead class="demand-table-text">岗位要求</thead>
              <tr>
                <td>性别年龄</td>
                <td v-html="sexAge"></td>
              </tr>
              <tr>
                <td>纹身染发</td>
                <td v-html="tattooHair"></td>
              </tr>
              <tr>
                <td>体检</td>
                <td v-html="medicalFee"></td>
              </tr>
              <tr>
                <td>视力</td>
                <td v-html="vision"></td>
              </tr>
              <tr>
                <td>文化技能</td>
                <td v-html="culturalSkills"></td>
              </tr>
              <tr>
                <td>民族</td>
                <td v-html="nation"></td>
              </tr>
              <tr>
                <td>身份证</td>
                <td v-html="idCard"></td>
              </tr>
              <tr>
                <td>其他要求</td>
                <td v-html="postOther"></td>
              </tr>

              <thead class="demand-table-text">薪资福利</thead>
              <tr v-if="workInfo.postType == 0">
                <td>底薪说明</td>
                <td v-html="workingPrice"></td>
              </tr>
              <tr v-if="workInfo.postType == 0">
                <td>加班费说明</td>
                <td v-html="overtimeDetails"></td>
              </tr>
              <tr v-if="workInfo.postType == 1">
                <td>工价</td>
                <td v-html="hoursPrice"></td>
              </tr>
              <tr>
                <td>补贴说明</td>
                <td v-html="subsidyDetails"></td>
              </tr>
              <tr>
                <td>发薪时间</td>
                <td v-html="payrollTime"></td>
              </tr>
              <tr>
                <td>其他说明</td>
                <td v-html="salaryOther"></td>
              </tr>

              <thead class="demand-table-text">食宿条件</thead>
              <tr>
                <td>住宿</td>
                <td v-html="accConditions"></td>
              </tr>
              <tr>
                <td>饮食</td>
                <td v-html="diet"></td>
              </tr>
              <tr>
                <td>其他说明</td>
                <td v-html="accOther"></td>
              </tr>

              <thead class="demand-table-text">工作时间</thead>
              <tr>
                <td>工作制</td>
                <td v-html="workSystem"></td>
              </tr>
              <tr>
                <td>班次时间</td>
                <td v-html="shiftTime"></td>
              </tr>
              <tr>
                <td>其他说明</td>
                <td v-html="workOther"></td>
              </tr>

              <thead class="demand-table-text">面试资料</thead>
              <tr>
                <td>面试资料</td>
                <td v-html="interviewData"></td>
              </tr>
              <tr>
                <td>其他说明</td>
                <td v-html="interviewOther"></td>
              </tr>
            </table>
          </div>

        </div>


        <div class="blue-work-line"></div>

        <div class="blue-work-detail-introduce">
          <span class="introduce-text">公司简介：</span>
          <div class="introduce-box" v-html="companyBrief"></div>
        </div>

        <div class="blue-work-detail-address">
          <img src="./location.png" class="location-pic"/>
          <div class="location-desc" v-html="companyAddress"></div>
        </div>

        <div class="blue-work-detail-carousel">
          <swiper :options="swiperOption" class="carousel-pic-box" ref="mySwiper" v-if=slideList.length>
            <swiper-slide v-for="(slide,index) in slideList" :key="index">
              <img :src="slide" class="carousel-pic"
                   v-if="slide.indexOf('jpg') != -1 || slide.indexOf('png') != -1 || slide.indexOf('jpeg') != -1 || slide.indexOf('gif') != -1"
                   onclick="return false"/>

              <video class="video-con" :poster="slide + '?vframe/png/offset/0.001'" preload="auto"
                     webkit-playsinline="true" playsinline="true" controls="controls"
                     x5-playsinline="true" loop="loop"
                     style="object-fit:cover" v-else>
                <source :src="slide" type="video/mp4">
              </video>
            </swiper-slide>
          </swiper>
        </div>

        <div class="blue-work-line"></div>


      </div>

      <div class="blue-work-detail-more-box">

        <div class="blue-work-more-text-box">
          <span class="hot-work-text">热门招聘</span>
          <span class="look-more-text" @click="lookMoreWork(1)">查看更多>></span>
        </div>
        <div class="blue-work-more-line"></div>

        <div class="blue-work-more-item" v-for="(work,i) in hotWorkList" :key="i" @click="openRecruit(work.id)">
          <img :src="work.mechanismUrl?work.mechanismUrl:require('../../../images/pic _bg.png')" class="company-pic4"/>
          <div class="work-more-con1">
            <span class="work-more-company1" :class="{'work-more-company-len':work.mechanismName.length >= 11}"
                  v-if="(work.postType == 0 && work.reStatus == 1 && work.reMoney > 0 && work.reTime > 0) || (work.postType == 1 && work.reStatus == 1 && work.addWorkMoney > 0 && work.reTime > 0)">
              {{work.mechanismName}}</span>
            <span class="work-more-company2" :class="{'work-more-company-len':work.mechanismName.length >= 15}" v-else>{{work.mechanismName}}</span>
            <span class="work-more-lend" v-show="work.lendType == 1">可借支</span>
          </div>
          <div class="work-more-con2">
            <span>{{work.workTypeName}}</span>
          </div>
          <div class="work-more-con3">
            <span>年龄要求：{{work.age}}</span>
          </div>
          <div class="work-more-con4">
            <span class="work-more-number">招{{work.maxNumber}}人</span><span v-if="work.status != 1"
                                                                            class="work-more-number">/已报名{{work.applyNumber}}人</span>
            <span class="work-more-money" v-if="work.postType == 0">{{work.wageRange}}元/月</span>
            <span class="work-more-money" v-if="work.postType == 1">{{work.workMoney}}元/时</span>
          </div>

          <div class="work-more-fee"
               v-if="work.postType == 0 && work.reStatus == 1 && work.reMoney > 0 && work.reTime > 0">
            <img src="../../../images/home_fee.png" class="company-pic5"/>
            <span class="more-fee-num">{{work.reMoney}}元</span>
          </div>

          <div class="work-more-fee"
               v-if="work.postType == 1 && work.reStatus == 1 && work.addWorkMoney > 0 && work.reTime > 0">
            <img src="../../../images/home_fee.png" class="company-pic5"/>
            <span class="more-fee-num">{{Math.floor(work.addWorkMoney * 10) / 10}}元/时</span>
          </div>
        </div>
      </div>

    </div>

    <service></service>

    <store-footer></store-footer>

    <apply-work :showApplyModal="showApplyModal" @closeApplyModal="closeApplyModal"
                @commitApply="commitApply"></apply-work>

    <login-popup :showModal="showModal" @closeModal="closeModal" @loginBackCall="loginBackCall"></login-popup>

    <apply-success :showApplySuccess="showApplySuccess" @closeApplySuccess="closeApplySuccess"
                   @lookApplySuccess="lookApplySuccess"></apply-success>

    <back-top></back-top>
  </div>

</template>

<script>
  import hurdle from "../../../components/hurdle";
  import service from "../../../components/service";
  import backTop from "../../../components/backTop";
  import applyWork from "../../../components/applyWork";
  import loginPopup from "../../../components/loginPopup";
  import storeFooter from "../../../components/storeFooter";
  import {baseUrl} from "../../../config/env";
  import {getSessionStore} from "../../../config/util";
  import {Loading} from 'element-ui';
  import applySuccess from "../../../components/applySuccess";
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    inject: ['reload'],
    data() {
      return {
        slideList: [],
        returnFeeDesc: "",
        companyBrief: "",
        companyAddress: "",
        mechanismName: "",
        workName: "",
        maxNumber: "",
        applyNum: "",
        workMoney: "",
        reTime: "",
        reMoney: "",
        interviewTime: "",
        mechanismId: "",
        recruitAddress: "",
        workId: this.$route.query.workId,
        workInfo: "",
        sginMark: 2,
        realName: "",
        workStatus: "",
        applyBtn: 0,
        collect: 2,
        showApplyModal: false,
        showModal: false,
        identity: "",
        origin: "",
        userToken: "",
        userWand: "",
        showApplySuccess: false,
        hotWorkList: [],
        swiperOption: {
          notNextTick: true,
          autoplay: false,
          loop: true,
          observer: true,
          observeParents: true,
          slidesPerView: 3,
          spaceBetween: 20,
        },
        sexAge: "",  //性别年龄
        tattooHair: "",  //纹身染发
        medicalFee: "",  //体检
        vision: "",  //视力
        culturalSkills: "",  //文化技能
        nation: "",  //民族
        idCard: "",  //身份证
        postOther: "", //岗位其他要求
        workingPrice: "",  //底薪说明
        hoursPrice: "",//工价
        overtimeDetails: "", //加班费说明
        subsidyDetails: "",  //补贴说明
        payrollTime: "", //发薪时间
        salaryOther: "", //薪资福利其他说明
        accConditions: "", //住宿
        diet: "", //饮食
        accOther: "",  //食宿条件其他说明
        workSystem: "",  //工作制度
        shiftTime: "", //班次时间
        workOther: "", //工作时间其他说明
        interviewData: "", //面试资料
        interviewOther: "",  //面试其他说明
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      if (getSessionStore("userWand")) {
        this.userWand = base64.decode(getSessionStore("userWand"));
        this.userToken = getSessionStore("userToken");
        this.sginMark = 1;
      }

      this.queryIsApplyCollect();
      this.queryHotWorkList();
    },
    mounted() {
      this.queryWorkDetail();
    },
    methods: {
      queryIsApplyCollect() {//查询是否已报名 、实名认证、咨询联系方式、收藏
        this.axios.get(baseUrl + "/work/query_isApplyOrIsCollection?userToken=" + this.userToken + "&workId=" + this.workId + "&sginMark=" + this.sginMark).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.apply = resultObj.data.isApply;
            this.realName = resultObj.data.userName; //是否实名
            this.collect = resultObj.data.isCollection; //0已收藏 1未收藏
            if (this.apply == 0) {//0已报名
              this.applyBtn = 1;
            } else if (this.apply == 1) {//1未报名
              this.applyBtn = 2;
            } else if (this.workStatus == 1) {//停止报名
              this.applyBtn = 3;
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      queryWorkDetail() {//查询招工详情
        this.axios.get(baseUrl + "/work/query_workdetail?workId=" + this.workId).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.imageList != null) {
              let picList = resultObj.data.imageList.split(";");//轮播图
              for (let i = 0, length = picList.length; i < length; i++) {
                this.slideList.push(picList[i]);
              }
            }
            this.returnFeeDesc = resultObj.data.reInstruction;//返费说明

            this.sexAge = resultObj.data.sexAge ? resultObj.data.sexAge : '无';//性别年龄
            this.tattooHair = resultObj.data.tattooHair ? resultObj.data.tattooHair : '无';//纹身染发
            this.medicalFee = resultObj.data.medicalFee ? resultObj.data.medicalFee : '无';//体检
            this.vision = resultObj.data.vision ? resultObj.data.vision : '无';//视力
            this.culturalSkills = resultObj.data.culturalSkills ? resultObj.data.culturalSkills : '无';//文化技能
            this.nation = resultObj.data.nation ? resultObj.data.nation : '无';//民族
            this.idCard = resultObj.data.idCard ? resultObj.data.idCard : '无';//身份证
            this.postOther = resultObj.data.postOther ? resultObj.data.postOther : '无';//岗位其他要求

            this.workingPrice = resultObj.data.workingPrice ? resultObj.data.workingPrice : '无';//底薪说明
            this.hoursPrice = resultObj.data.hoursPrice ? resultObj.data.hoursPrice : '无';//工价
            this.overtimeDetails = resultObj.data.overtimeDetails ? resultObj.data.overtimeDetails : '无';//加班費説明
            this.subsidyDetails = resultObj.data.subsidyDetails ? resultObj.data.subsidyDetails : '无';//补贴说明
            this.payrollTime = resultObj.data.payrollTime ? resultObj.data.payrollTime : '无';//发薪时间
            this.salaryOther = resultObj.data.salaryOther ? resultObj.data.salaryOther : '无';//薪资福利其他说明
            this.accConditions = resultObj.data.accConditions ? resultObj.data.accConditions : '无';//住宿
            this.diet = resultObj.data.diet ? resultObj.data.diet : '无';//饮食
            this.accOther = resultObj.data.accOther ? resultObj.data.accOther : '无';//食宿条件其他说明

            this.workSystem = resultObj.data.workSystem ? resultObj.data.workSystem : '无';//工作制度
            this.shiftTime = resultObj.data.shiftTime ? resultObj.data.shiftTime : '无';//班次时间
            this.workOther = resultObj.data.workOther ? resultObj.data.workOther : '无';//工作时间其他说明

            this.interviewData = resultObj.data.interviewData ? resultObj.data.interviewData : '无';//面试资料
            this.interviewOther = resultObj.data.interviewOther ? resultObj.data.interviewOther : '无';//面试其他说明

            this.companyBrief = resultObj.data.mechanismDetails;//公司简介
            this.companyAddress = resultObj.data.mechanismAddress;//公司地址
            this.mechanismName = resultObj.data.mechanismName;//企业名称
            this.workName = resultObj.data.workTypeName;//岗位名称
            this.maxNumber = resultObj.data.maxNumber;//需求人数
            this.applyNum = resultObj.data.applyNumber;//已报名数
            this.workMoney = resultObj.data.postType == 1 ? resultObj.data.workMoney + "元/小时" : resultObj.data.wageRange + "元/月";//工种0正式1小时
            this.workStatus = resultObj.data.status; //招工状态0正在招工1已经招满

            this.reTime = resultObj.data.reTime; //返费时间（单位：月）
            this.reMoney = resultObj.data.reMoney; //返费金额
            this.interviewTime = resultObj.data.interviewTime; //面试时间
            this.mechanismId = resultObj.data.mechanismId; //企业id
            this.recruitAddress = resultObj.data.recruitAddress; //面试地址
            this.workInfo = resultObj.data;
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      closeApplyModal() {
        this.showApplyModal = false;
      },
      openApplyModal() {
        if (this.userWand) {
          if (this.realName != "" && this.realName != undefined && this.realName != null) {//实名
            this.commitApply(this.realName);
          } else {
            this.showApplyModal = true;
          }
        } else {
          this.showModal = true;
        }
      },
      closeModal() {
        this.showModal = false;
      },
      loginBackCall() {
        this.reload();
      },
      commitApply(name) {//报名
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.showApplyModal = false;
        let data = {
          "reTime": this.reTime,
          "reMoney": this.reMoney,
          "identity": this.identity,
          "interviewTime": this.interviewTime,
          "mechanismId": this.mechanismId,
          "userName": name,
          "workId": this.workId,
          "recruitAddress": this.recruitAddress,
          "mechanismName": this.mechanismName,
          "origin": this.origin,
        };

        this.axios.post(baseUrl + "/work/entryApply?type=1" + "&userToken=" + this.userToken, data).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.applyBtn = 1;
              this.showApplySuccess = true;
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      cancelApply() {//取消报名
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.axios.post(baseUrl + "/work/cancleApply?userToken=" + this.userToken + "&workId=" + this.workId).then((res) => {
          let resultObj = res.data;
          loading.close();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data == 0) {
              this.$message({message: "取消报名失败,请稍后重试!", center: true, type: 'error', duration: 1000});
            } else {
              this.applyBtn = 2;
            }
          } else {
            this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
          }
        }).catch(() => {
          loading.close();
          this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
        });
      },
      collectWork() {//收藏
        if (this.userWand) {
          let loading = Loading.service({
            text: '拼命加载中....',
            lock: false,
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.axios.get(baseUrl + "/social/set_collection?userToken=" + this.userToken + "&type=1" + "&status=1" + "&id=" + this.workId).then((res) => {
            let resultObj = res.data;
            loading.close();
            if (resultObj.code == 0) {
              if (resultObj.data == 1) {
                this.collect = 1;
                this.$message({message: "取消收藏成功", center: true, type: 'success', duration: 1000});
              } else {
                this.collect = 0;
                this.$message({message: "收藏成功", center: true, type: 'success', duration: 1000});
              }
            } else {
              this.$message({message: resultObj.msg, center: true, type: 'error', duration: 1000});
            }
          }).catch(() => {
            loading.close();
            this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
          });
        } else {
          this.showModal = true;
        }
      },
      queryHotWorkList() {
        this.axios.get(baseUrl + "/workapi/get_work_list_api?hotStatus=1" + "&page=1" + "&size=3").then((res) => {
          let retObj = res.data;
          if (retObj.code == 0) {
            if (retObj.data.list != null && retObj.data.list.length > 0) {//招聘列表
              this.hotWorkList = retObj.data.list;
            }
          } else {
            this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
          }
        });
      },
      closeApplySuccess() {
        this.showApplySuccess = false;
      },
      lookApplySuccess() {
        this.showApplySuccess = false;
        window.open("/interview");
      },
      lookMoreWork(more) {
        window.open("/index?looKMore=" + more);
      },
      openRecruit(workId) {
        window.open("/workDetail?workId=" + workId);
      },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      hurdle,
      service,
      applyWork,
      storeFooter,
      loginPopup,
      applySuccess,
      swiper,
      swiperSlide,
      backTop
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assets/mixin";

  .blue-work-detail-container {
    .wh(100%, auto);
    position: relative;
    .blue-work-detail-box1 {
      display: flex;
      justify-content: center;
      .wh(100%, 240px);
      background: #F2F4F5;
      .blue-work-detail-con1 {
        position: relative;
        display: flex;
        align-items: center;
        .wh(1200px, 240px);
        .company-pic1 {
          .wh(206px, 152px);
          background: #CCCCCC;
        }
        .company-work-box {
          padding-left: 24px;
          .company-work-con1 {
            display: flex;
            align-items: center;
            padding-top: 11px;
            padding-bottom: 15px;
            .company-name {
              .size-color(24px, #333333);
              padding-right: 24px;
            }
            .lend-text {
              text-align: center;
              line-height: 20px;
              .wh(60px, 20px);
              background: #3CAFFF;
              border-radius: 2px;
              .size-color(14px, #FFF)
            }
          }
          .company-work-con2 {
            padding-bottom: 14px;
            .post-text {
              .size-color-weight(18px, #3CAFFF, 500);
            }
          }
          .company-work-con3 {
            padding-bottom: 28px;
            span {
              .size-color(14px, #999999);
              &:nth-child(1) {
                padding-right: 14px;
              }
            }
          }
          .company-work-con4 {
            .size-color-weight(20px, #FF7C3C, 500);
          }
        }
        .company-work-fee {
          position: absolute;
          top: 50px;
          left: 737px;
          .wh(92px, 92px);
          .company-pic2 {
            .wh(100%, 100%)
          }
          .fee-num {
            position: absolute;
            bottom: 14px;
            left: 0px;
            width: 75px;
            text-align: center;
            .size-color-weight(16px, #FFF, 500);
          }
        }
        .company-collect-box {
          margin-left: auto;
          .fj(center, center);
          .wh(94px, 40px);
          border: 1px solid #3CAFFF;
          border-radius: 4px;
          margin-right: 12px;
          cursor: pointer;
          &:hover {
            border: 1px solid #39A2ED;
            cursor: pointer;
          }
          .collect-text {
            padding-left: 6px;
            .size-color(16px, #3CAFFF);
          }
          .company-pic3 {
            .wh(18px, 18px);
          }
        }
        .apply-work-btn {
          .wh(136px, 42px);
          .size-color(16px, #FFF);
          background: #3CAFFF;
          border-radius: 4px;
          &:hover {
            background: #39A2ED;
            cursor: pointer;
          }
        }
        .cancel-collect-text {
          margin-left: auto;
          .wh(96px, 42px);
          margin-right: 12px;
          .size-color(16px, #999999);
          background: #F2F4F5;
          border: 1px solid #999999;
          border-radius: 4px;

          &:hover {
            background: #CCC;
            color: #666;
            cursor: pointer;
            border: none;
          }
        }
        .cancel-work-btn {
          .wh(136px, 42px);
          .size-color(16px, #FFF);
          background: rgba(255, 166, 60, 1);
          border-radius: 4px;
          &:hover {
            background: #F5A13B;
            cursor: pointer;
          }
        }
        .await-work-btn {
          .wh(136px, 42px);
          .size-color(16px, #FFF);
          background: #CCCCCC;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
    .blue-work-detail-box2 {
      display: flex;
      justify-content: center;
      .wh(100%, auto);
      .blue-work-detail-brief-box {
        .wh(840px, auto);
        .return-fee-box {
          margin-top: 20px;
          margin-bottom: 34px;
          .wh(840px, 106px);
          background: #FFF7EB;
          display: flex;
          align-items: center;
          .return-fee-text {
            margin-left: 16px;
            .wh(72px, 72px);
            border: 1px solid #FF7C3C;
            border-radius: 50%;
            .fj(center, center);
            flex-direction: column;
            span {
              .size-color(16px, #FF7C3C);
              &:first-child {
                padding-bottom: 4px;
              }
            }
          }
          .return-fee-line {
            .wh(1px, 66px);
            margin-left: 16px;
            margin-right: 16px;
            background: #F0E8DD;
          }
          .return-fee-con {
            .size-color(16px, #FF7C3C);
          }
          .return-fee-con /deep/ p {
            line-height: 24px;
          }
        }
        .blue-work-detail-brief-con {
          margin-bottom: 48px;
          .brief-text-box {
            display: flex;
            align-items: center;
            .size-color(18px, #333333);
            margin-bottom: 20px;
            .brief-line {
              .wh(3px, 20px);
              background: #3CAFFF;
              margin-right: 8px;
            }
          }
          .blue-work-detail-table-box {
            .wh(840px, auto);
            .demand-table-box {
              display: flex;
              flex-direction: column;
              .wh(100%, auto);
              border: 1px solid rgba(235, 235, 235, 1);
              .demand-table-text {
                .wh(100%, 40px);
                background: rgba(220, 235, 250, 1);
                .size-color(16px, #333);
                line-height: 40px;
                text-align: center;
              }
              tr {
                display: flex;
                .wh(100%, auto);
                .size-color(14px, #4C4C4C);
                &:last-child {
                  td {
                    border-bottom: 0 !important
                  }

                }
                td {
                  padding-top: 12px;
                  padding-bottom: 12px;
                  vertical-align: middle;
                  &:nth-child(1) {
                    display: flex;
                    align-items: center;
                    border-right: 1px solid rgba(235, 235, 235, 1);
                    border-bottom: 1px solid rgba(235, 235, 235, 1);
                    padding-left: 12px;
                    width: 150px;
                  }
                  &:nth-child(2) {
                    padding-left: 12px;
                    padding-right: 12px;
                    line-height: 40px;
                    flex: 1;
                    border-bottom: 1px solid #EBEBEB;
                  }
                }
              }
            }
          }
        }
        .no-free{
          margin-top: 75px;
        }
        .blue-work-line {
          .wh(840px, 5px);
          border-top: 1px solid #EBEBEB;
          border-bottom: 1px solid #EBEBEB;
          &:last-child {
            margin-bottom: 60px;
          }
        }
        .blue-work-detail-introduce {
          margin-bottom: 25px;
          margin-top: 46px;
          display: flex;
          flex-direction: column;
          .introduce-text {
            margin-bottom: 32px;
            .size-color(18px, #333333)
          }
          .introduce-box {
            line-height: 24px;
            .size-color(14px, #4D4D4D);
          }
        }
        .blue-work-detail-address {
          margin-bottom: 36px;
          display: flex;
          align-items: flex-start;
          .location-pic {
            .wh(18px, 18px)
          }
          .location-desc {
            margin-left: 10px;
            .size-color(14px, #4D4D4D);
            line-height: 16px;
          }
        }
        .blue-work-detail-carousel {
          .wh(840px, 160px);
          margin-bottom: 60px;
          .carousel-pic-box {
            .wh(840px, 160px);
            .carousel-pic {
              .wh(270px, 160px);
            }
            .video-con {
              .wh(270px, 160px);
            }
          }
        }
      }
      .blue-work-detail-more-box {
        .wh(302px, auto);
        margin-left: 58px;
        .blue-work-more-text-box {
          padding-top: 75px;
          padding-bottom: 24px;
          display: flex;
          align-items: flex-end;
          .hot-work-text {
            .size-color(20px, #47718F);
          }
          .look-more-text {
            margin-left: auto;
            .size-color(16px, #47718F);
            &:hover {
              cursor: pointer;
              color: #3E637D;
            }
          }
        }
        .blue-work-more-line {
          .wh(302px, 5px);
          margin-bottom: 26px;
          border-top: 1px solid #EBEBEB;
          border-bottom: 1px solid #EBEBEB;
        }
        .blue-work-more-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 20px;
          .wh(100%, 262px);
          background: #FFF;
          border: 1px solid #EBEBEB;
          position: relative;
          .company-pic4 {
            margin-top: 10px;
            margin-left: 10px;
            .wh(282px, 132px);
            background: #F5F5F5;
          }
          .work-more-con1 {
            display: flex;
            margin-left: 13px;
            padding-top: 12px;
            padding-bottom: 9px;
            .work-more-company {
              .size-color(16px, #333333);
            }
            .work-more-company-len {
              .ellipsis(160px);
            }
            .work-more-lend {
              margin-left: 8px;
              .wh(40px, 16px);
              text-align: center;
              line-height: 16px;
              background: #3CAFFF;
              border-radius: 2px;
              .size-color(10px, #FFFFFF);
            }
          }
          .work-more-con2 {
            margin-left: 13px;
            .size-color(16px, #3CAFFF);
          }
          .work-more-con3 {
            margin-left: 13px;
            padding-top: 15px;
            padding-bottom: 7px;
            .size-color(13px, #999999);
          }
          .work-more-con4 {
            display: flex;
            align-items: center;
            margin-left: 13px;
            .work-more-number {
              .size-color(13px, #999999);
            }
            .work-more-money {
              margin-left: auto;
              margin-right: 18px;
              .size-color-weight(16px, #FF7C3C, 500);
            }
          }
          .work-more-fee {
            position: absolute;
            bottom: 48px;
            right: 11px;
            .wh(72px, 72px);
            .company-pic5 {
              .wh(100%, 100%)
            }
            .more-fee-num {
              position: absolute;
              bottom: 10px;
              width: 58px;
              left: 0;
              text-align: center;
              .size-color-weight(12px, #FFF, 500);
            }
          }
        }
      }
    }
  }
</style>
